<template>
  <el-dialog
    title="操作记录"
    :show-close='false'
    :visible.sync="visible"
    :close-on-click-modal='false'
    :close-on-press-escape='false'>
    <el-editable
      :data="tableData"
      max-height='400'
      v-loading="tableLoading"
      :columns="columns"/>
    <div slot="footer">
      <el-button
        type="primary"
        @click="handleDialogCancel">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import ElEditable from '@components/el-editable'
export default {
  components: { ElEditable },
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      tableData: [],
      tableLoading: false,
      columns: [
        { prop: 'qq', label: '操作类型', minWidth: 120, showTooltipWhenOverflow: true },
        { prop: 'aa', label: '操作时间', minWidth: 120, showTooltipWhenOverflow: true },
        { prop: 'zz', label: '操作人', minWidth: 120, showTooltipWhenOverflow: true },
        { prop: 'xx', label: '备注', minWidth: 120, showTooltipWhenOverflow: true }
      ]
    }
  },
  watch: {
    visible (val) {
      if (val) this.getTableData()
    }
  },
  methods: {
    getTableData () {
      console.log(this.id)
    },
    // 关闭弹框，向父级回调
    handleDialogCancel () {
      this.$emit('closeDialog')
    }
  }
}
</script>
